<!-- <div>
  <div flex layout="row">
    <content></content>
  </div>
</div>

 -->

 <div flex layout="row">
<md-sidenav md-is-locked-open="true" class="md-whiteframe-z2">
  <md-list>
    <md-list-item>
      <md-button class="md-raised md-primary" ng-click="$ctrl.DesStats()">Description</md-button>
    </md-list-item>
    <md-list-item>
      <md-button class="md-raised md-primary" ng-click="$ctrl.TraStats()">Training Stats</md-button>
    </md-list-item>
    <md-list-item>
      <md-button class="md-raised md-primary" ng-click="$ctrl.InsStats()">Instantiate a Network and Trainer</md-button>
    </md-list-item>
    <md-list-item>
      <md-button class="md-raised md-primary" ng-click="$ctrl.NetStats()">Network Visualization</md-button>
    </md-list-item>
    <md-list-item>
      <md-button class="md-raised md-primary" ng-click="$ctrl.ExaStats()">Example predictions on Test set</md-button>
    </md-list-item>
  </md-list>
</md-sidenav>

<md-content flex id="content">
      <div ng-class="{false:'divShowState'}[$ctrl.className]" id="divDes">
    
        <p>
          This demo trains a Convolutional Neural Network on the <a href="http://www.cs.toronto.edu/~kriz/cifar.html">CIFAR-10 dataset</a> in your browser, with nothing but Javascript. The state of the art on this dataset is about 90% accuracy and human performance is at about 94% (not perfect as the dataset can be a bit ambiguous). I used <a href="cifar10_parse.zip">this python script</a> to parse the <a href="http://www.cs.toronto.edu/~kriz/cifar.html">original files</a> (python version) into batches of images that can be easily loaded into page DOM with img tags.
        </p>
        <p>
          This dataset is more difficult and it takes longer to train a network. Data augmentation includes random flipping and random image shifts by up to 2px horizontally and verically.
        </p>
        <p>
          By default, in this demo we're using Adadelta which is one of per-parameter adaptive step size methods, so we don't have to worry about changing learning rates or momentum over time. However, I still included the text fields for changing these if you'd like to play around with SGD+Momentum trainer.
        </p>
        <p>
          Report questions/bugs/suggestions to <a href="https://twitter.com/karpathy">@karpathy</a>.
        </p>
      </div>
      <div ng-class="{false:'divShowState'}[$ctrl.TraClassName]" id="divTrainningStats">
        
        <div class="divItemLeft">
          <md-button class="md-raised md-primary">resume</md-button>
          <p>Forward time per example: 7ms</p>
          <p>Backprop time per example: 13ms</p>
          <p>Classification loss: 1.98555</p>
          <p>L2 Weight decay loss: 0.00106</p>
          <p>Training accuracy: 0.34</p>
          <p>Validation accuracy: 0.21</p>
          <p>Examples seen: 1190</p>
          Learning rate: 
          <input type="text" value="0.01"> 
          <md-button class="md-raised md-primary">change</md-button>
          <br>
          Momentum:
          <input type="text" value="0.9">
          <md-button class="md-raised md-primary">change</md-button>
          <br>
          Batch Size:
          <input type="text" value="4">
          <md-button class="md-raised md-primary">change</md-button>
          <br>
          Weight decay:
          <input type="text" value="0.001">
          <md-button class="md-raised md-primary">change</md-button>
          <br>
          <md-button class="md-raised md-primary">save network snapshot as JSON</md-button><br>
          <md-button class="md-raised md-primary">init network from JSON snapshot</md-button>
        </div>
        <div class="divItemRight">
          <img src="../app/public/img/tr.png">
           <md-list-item>
            <md-button class="md-raised md-primary">clear graph</md-button>
          </md-list-item>
        </div>
      </div>
      <div ng-class="{false:'divShowState'}[$ctrl.InsNetTraClassName]" id="divInsNetTra">
        <textarea class="textareaOne">
          layer_defs = [];
          layer_defs.push({type:'input', out_sx:32, out_sy:32, out_depth:3});
          layer_defs.push({type:'conv', sx:5, filters:16, stride:1, pad:2, activation:'relu'});
          layer_defs.push({type:'pool', sx:2, stride:2});
          layer_defs.push({type:'conv', sx:5, filters:20, stride:1, pad:2, activation:'relu'});
          layer_defs.push({type:'pool', sx:2, stride:2});
          layer_defs.push({type:'conv', sx:5, filters:20, stride:1, pad:2, activation:'relu'});
          layer_defs.push({type:'pool', sx:2, stride:2});
          layer_defs.push({type:'softmax', num_classes:10});

          net = new convnetjs.Net();
          net.makeLayers(layer_defs);

          trainer = new convnetjs.SGDTrainer(net, {method:'adadelta', batch_size:4, l2_decay:0.0001});

        </textarea>
        <md-list-item>
            <md-button class="md-raised md-primary">change network</md-button>
          </md-list-item>
      </div>
      <div ng-class="{false:'divShowState'}[$ctrl.NetVisClassName]" id="divNetVis">
        <div>

          <div class="divfloatLeft divMargin">
            <p>input (32x32x3)</p>
            <p>max activation: 0.5, min: -0.43334</p>
            <p>max gradient: 0.05943, min: -0.08379</p>
          </div> 

          <div class="divImgHeight">
            <p>Activations:</p>
            <img src="../app/public/img/001.png">
            <img src="../app/public/img/002.png">
          </div>

          <hr>

          <div class="divfloatLeft divMargin" >
            <div>conv (32x32x16) </div>
            <p>filter size 5x5x3, stride 1</p>
            <p>max activation: 0.61751, min: -0.81251</p>
            <p>max gradient: 0.05318, min: -0.04332</p>
            <p>parameters: 16x5x5x3+16 = 1216</p>
          </div>

          <div>
            <div>
              <p>Activations:</p>
              <img src="../app/public/img/42.png">
              <img src="../app/public/img/43.png">
              <img src="../app/public/img/44.png">
              <img src="../app/public/img/45.png">
              ...
            </div>
            <div>
              <p>Activation Gradients:</p>
              <img src="../app/public/img/412.png">
              <img src="../app/public/img/414.png">
              <img src="../app/public/img/412.png">
              <img src="../app/public/img/414.png">
              ...
            </div>
          </div>
          <hr>

          <div class="divfloatLeft divMargin" >
            <p>relu (32x32x16) </p>
            <p>max activation: 0.77456, min: 0</p>
            <p>max gradient: 0.01714, min: -0.01759</p>
          </div>

          <div class="divImgHeight">
            <div>
              <p>Activations:</p>
              <img src="../app/public/img/a15.png">
              <img src="../app/public/img/a14.png">
              <img src="../app/public/img/a16.png">
              <img src="../app/public/img/a17.png">
              ...
            </div> 
          </div>
           <hr>
          <div>
            ...
          </div>
          <hr>
          <div class="divfloatLeft divMargin" >
            <p>softmax (1x1x10)</p>
            <p>max activation: 0.15916, min: 0.07192</p>
            <p>max activation: 0.61751, min: -0.81251</p>
            <p>max gradient: 0.05318, min: -0.04332</p>
            <p>parameters: 16x5x5x3+16 = 1216</p>
          </div>

          <div>
            <div>
              <p>Activations:</p>
              <img src="../app/public/img/d3.png">
              <img src="../app/public/img/fc3.png">
              <img src="../app/public/img/d3.png">
              <img src="../app/public/img/fc3.png">
              ...
            </div> 
          </div>

        </div>
      </div>
     
        <div ng-class="{false:'divShowState'}[$ctrl.ExaPredClassName]" id="divExaPred">
        <p>test accuracy based on last 200 test images: 0.25</p>


        <div class="divContainer">
          <div class="divfloatLeft divClass"> 
            <div class="divImg"><img src="../app/public/img/8.png"></div>
            <div class="divfloatLeft">
              <p class="pBackColor2">car</p>
              <p class="pBackColor3">truk</p>
              <p class="pBackColor1">truck</p>
            </div>
          </div>

          <div class="divfloatLeft divClass"> 
            <div class="divImg"><img src="../app/public/img/9.png"></div>
            <div class="divfloatLeft">
              <p class="pBackColor2">car</p>
              <p class="pBackColor3">truk</p>
              <p class="pBackColor1">truck</p>
            </div>
          </div>

          <div class="divfloatLeft divClass"> 
            <div class="divImg"><img src="../app/public/img/1.png"></div>
            <div class="divfloatLeft">
              <p class="pBackColor2">car</p>
              <p class="pBackColor3">truk</p>
              <p class="pBackColor1">truck</p>
            </div>
          </div>

          <div class="divfloatLeft divClass"> 
            <div class="divImg"><img src="../app/public/img/2.png"></div>
            <div class="divfloatLeft">
              <p class="pBackColor2">car</p>
              <p class="pBackColor3">truk</p>
              <p class="pBackColor1">truck</p>
            </div>
          </div>
        </div>

        <div>
        <div class="divfloatLeft divClass"> 
          <div class="divImg"><img src="../app/public/img/8.png"></div>
          <div class="divfloatLeft">
            <p class="pBackColor2">car</p>
            <p class="pBackColor3">truk</p>
            <p class="pBackColor1">truck</p>
          </div>
        </div>

        <div class="divfloatLeft divClass"> 
          <div class="divImg"><img src="../app/public/img/9.png"></div>
          <div class="divfloatLeft">
            <p class="pBackColor1">car</p>
            <p class="pBackColor2">truk</p>
            <p class="pBackColor3">truck</p>
          </div>
        </div>

        <div class="divfloatLeft divClass"> 
          <div class="divImg"><img src="../app/public/img/1.png"></div>
          <div class="divfloatLeft">
            <p class="pBackColor1">car</p>
            <p class="pBackColor3">truk</p>
            <p class="pBackColor2">truck</p>
          </div>
        </div>

        <div class="divfloatLeft divClass"> 
          <div class="divImg"><img src="../app/public/img/2.png"></div>
          <div class="divfloatLeft">
            <p class="pBackColor2">car</p>
            <p class="pBackColor3">truk</p>
            <p class="pBackColor1">truck</p>
          </div>
        </div>

        </div>
        <div>
           <div class="divfloatLeft divClass"> 
          <div class="divImg"><img src="../app/public/img/8.png"></div>
          <div class="divfloatLeft">
            <p class="pBackColor2">car</p>
            <p class="pBackColor3">truk</p>
            <p class="pBackColor1">truck</p>
          </div>
        </div>

        <div class="divfloatLeft divClass"> 
          <div class="divImg"><img src="../app/public/img/9.png"></div>
          <div class="divfloatLeft">
            <p class="pBackColor2">car</p>
            <p class="pBackColor3">ship</p>
            <p class="pBackColor1">truck</p>
          </div>
        </div>

        <div class="divfloatLeft divClass"> 
          <div class="divImg"><img src="../app/public/img/1.png"></div>
          <div class="divfloatLeft">
            <p class="pBackColor1">car</p>
            <p class="pBackColor2">deer</p>
            <p class="pBackColor3">truck</p>
          </div>
        </div>

        <div class="divfloatLeft divClass"> 
          <div class="divImg"><img src="../app/public/img/2.png"></div>
          <div class="divfloatLeft">
            <p class="pBackColor3">car</p>
            <p class="pBackColor2">dog</p>
            <p class="pBackColor1">truck</p>
          </div>
        </div>
        </div>
      </div>
    </md-content>
</div>